<!--
 * @Author: lsjweiyi lsjweiyi
 * @Date: 2023-04-09 15:55:11
 * @LastEditors: lsjweiyi 759209794@qq.com
 * @LastEditTime: 2024-05-12 12:06:35
 * @FilePath: \web-ssg\pages\image\IdcardChangeColor.vue
 * @Description: 图片转文档
-->
<template>
    <n-steps :current="stepCurrent" :status="stepCurrent  == 4 ? 'finish' : 'process'" style="margin: 5px;">
        <n-step title="付款" description="5毛钱一次，上外面哪里找呀？高低得要你开个会员再说！请先付款！降低我的成本，售价也跟着调低！" />
        <n-step title="选择图片" description="点击选择文件按钮选择一张文档型的图片" />
        <n-step title="上传处理，等待最多一分钟" description="点击上传处理，通常十多秒就完成" />
        <n-step title="进入下载页下载" description="下载按钮亮了，说明可以进入下载了！如果想要处理下一张图片，点击重新付费即可" />
    </n-steps>
    <div class="myBody">
        <div style="max-width: 600px" class="insideCard">
            <div style="display: inline-flex; flex-direction: column">
                <div>
                    <n-h3>已选图片：</n-h3>
                    <n-h3>{{ upLoadImg ? upLoadImg : "-" }}</n-h3>
                </div>
                <n-h3 v-if="stepCurrent == 2">等待上传处理</n-h3>
                <n-h3 v-else-if="stepCurrent == 3">任务已开始，请耐心等待，过程中请勿刷新页面，否则任务会丢失无法找回...
                    <n-h3>预计耗时1分钟：<n-countdown :duration="60000" :active="stepCurrent == 3" /></n-h3>
                </n-h3>
                <n-h3 v-else-if="stepCurrent == 4" style="color: red">任务已完成，请点击下载按钮进行下载 </n-h3>
                <div>
                    <n-h3 style="color: red;">说明：</n-h3>
                    <n-h6>1. 该功能需要先付费再使用，因为这样能降低运营成本，我才能降低价格！</n-h6>
                    <n-h6>2. 付款后请勿刷新页面，会丢失付款记录(见第四条，会自动退款，也无需担心)</n-h6>
                    <n-h6>3. 本站承诺，图片上传一分钟未返回结果，自动退款！</n-h6>
                    <n-h6>4. 付款超过10分钟未上传图片的(含传图失败的)，系统会自动发起退款</n-h6>
                    <n-h6>5. 本次任务结束后，重新付款即可开启新的一次任务处理！</n-h6>
                </div>
            </div>
        </div>
        <div class="buttonGroup">
            <Pay v-model:task-id="taskId" :tool-name="toolIMsg.name" :tool-id="toolIMsg.toolId"></Pay>
            <SingleFileUpload ref="uploadRef" @select-file="fileChange" @upload-file="myUpload" :loading="stepCurrent == 3"
                :select-disabled="taskId == ''">
            </SingleFileUpload>
            <Down v-model:task-id="taskId" :tool-name="toolIMsg.name" :tool-id="toolIMsg.toolId"
                :disabled="!docType.word" :word="docType.word" :excel="docType.excel"></Down>
            <HistoryDown :tool-name="toolIMsg.name" :tool-id="toolIMsg.toolId"></HistoryDown>
        </div>
        <div class="insideCard">
            <div style="color: red; margin-bottom: 10px">支持格式：jpg/jpeg、png、bmp</div>
            <div style="color: red; margin-bottom: 10px">{{ "限制大小：" + maxSize + "KB" }}</div>
            <div>{{ toolIMsg.description }}</div>
            <div style="color: red; margin-top: 10px">由于转换的结果是文档，不便直接展示效果，请下载后查看</div>
            <div style="font-size: 16px; margin-top: 10px">PS：本站不收集任何个人信息，请放心使用！上传的图片在服务器约保存24小时后自动删除</div>
        </div>
    </div>
    <n-divider />
    <n-h1 style="margin-left:15px ;">以下是例子展示，客官是否满意？</n-h1>
    <n-card title="转化后，里面的公式是可编辑的哦！">
        <div style="display: inline-flex;align-items: center;">
            <n-image-group>
                <NImage src="/images/region21.jpg" lazy alt="数学试卷原图" />
                <img src="/images/arrow.png" lazy style="width: 64px;">
                <NImage src="/images/img2doc2.jpg" lazy alt="转文档后的效果图" />
            </n-image-group>
        </div>
    </n-card>
    <n-divider />
    <n-card title="转化后，表格完美识别，底色也会被去掉哦！">
        <div style="display: inline-flex;align-items: center;">
            <NImage src="/images/region4.jpg" lazy alt="拍照的表格原图" />
            <img src="/images/arrow.png" lazy style="width: 64px;">
            <NImage src="/images/img2doc1.png" lazy alt="转文档后的效果图" />
        </div>
    </n-card>
</template>
<script lang="ts" setup>
import "@/assets/insideBody.scss";
import "@/assets/button.scss";
import { createDiscreteApi } from "naive-ui";

const toolIMsg = getImageMenuItem("");

const maxSize = 3070; // 上传图片限制的大小，单位KB
useHead({
    title: toolIMsg.name,
});
useSeoMeta({
    description: toolIMsg.description,
});
let taskId = ref("");
const upLoadImg = ref<string | undefined>(); // 处理前的图片链接

const uploadRef = ref()

const stepCurrent = ref(1)//当前步骤： 1：待付款，2：等待选择图片，2：等待上传，4：上传完成

// 自定义上传图像的方法覆盖默认方法
const myUpload = (file: File) => {
    stepCurrent.value = 3;
    // 后端接口
    img2doc(file, taskId.value, toolIMsg.toolId as number).then((res) => {
        if (responseDeal(res, "图片转文档失败！", undefined, undefined, undefined)) {
            setTimeout(circleGetResult, 10000); // 10秒后查询结果
        } else {
            stepCurrent.value = 2
        }
    });
};

const docType = ref({ word: false, excel: false } as IDocType)
// 循环查询任务结果，直到任务完成或失败
function circleGetResult() {
    img2docResult(taskId.value, toolIMsg.toolId as number).then((res) => {
        const { dialog } = createDiscreteApi(["dialog"]);
        if (res.code < 0) {
            dialog.error({
                title: "图片转文档失败！",
                content: res.data + "。如有疑问请联系管理员，日志id：" + res.logId,
                positiveText: "确定",
                onPositiveClick: () => { },
            });
            stepCurrent.value = 2
            uploadRef.value.clearFile()
            return;
        } else if (res.code == 1) {
            setTimeout(circleGetResult, 3000); // 任务还在执行，3秒后重新查询结果
            return; // 任务还在进行中
        } else {
            stepCurrent.value = 4;
            docType.value = res.data as IDocType
            uploadRef.value.clearFile()
            return; // 任务已经完成
        }
    });
}

/**
 * @description: 上传文件按钮回调函数
 * @param {*} file
 * @return {*}
 */
const fileChange = (file: File, fn: (result: boolean) => void) => {
    checkFile(file, maxSize, [15, 4096]).then((res) => {
        if (res) {
            upLoadImg.value = file.name;
            stepCurrent.value = 2;
            fn(true);
        } else {
            fn(false);
        }
    });
};

watch(taskId, (newVal) => {
    uploadRef.value.clearFile()
    docType.value = { word: false, excel: false }
    if (newVal) {
        stepCurrent.value = 2
    }
})


</script>
<style>
.purple {
    filter: hue-rotate(50deg);
}

.purple:hover {
    filter: hue-rotate(50deg) saturate(1.5);
}

.purple:active {
    filter: hue-rotate(50deg) saturate(1.7);
}
</style>
